<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>计算属性、方法、侦听器</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		{{fullName}}
		{{age}}
	</div>
	<script>
		var vue = new Vue({
			el: "#app",
			data: {
				firstName: "x",
				lastName: "c",
				fullName: "xc",
				age: 28
			},
			// computed: {	//计算属性(内置缓存),当依赖的值发生改变才会重新计算
			// 	fullName: function() {
			// 		console.log("计算了一次")
			// 		return this.firstName + this.lastName
			// 	}
			// },
			watch: {	//侦听器
				firstName: function() {
					this.fullName = this.firstName + this.lastName
				},
				lastName: function() {
					this.fullName = this.firstName + this.lastName
				}
			}
		})
	</script>
</body>
</html>